<template>
  <div class="exchange-bond">
    <c-title :text="text"></c-title>
    <div class="header">
      <div class="img">
        <img :src="avatar_image" style="width: 100%; height: 100%;" />
      </div>
      <span>{{ username }}</span>
    </div>
    <div class="detail-wrapper">
      <div class="flex-center">
        <div class="mb24">
          <p class="fz28 mb8">{{ $i18n.t('money') }}{{ un_settlement_count }}</p>
          <span class="c-999 ">未结算</span>
        </div>
        <div>
          <p class="fz28 mb8">{{ $i18n.t('money') }}{{ one_consignment_sum }}</p>
          <span class="c-999">直推寄售业绩</span>
        </div>
      </div>
      <div class="flex-center">
        <div class="mb24">
          <p class="fz28 mb8">{{ $i18n.t('money') }}{{ finish_settlement_count }}</p>
          <span class="c-999">已结算</span>
        </div>
        <div>
          <p class="fz28 mb8">{{ $i18n.t('money') }}{{ consignment_sum }}</p>
          <span class="c-999">间推寄售业绩</span>
        </div>
      </div>
    </div>
    <div style="height: 0.75rem; background: #f5f5f5;"></div>
    <van-tabs v-model="active" @change="change">
      <van-tab title="全部"></van-tab>
      <van-tab title="未结算"></van-tab>
      <van-tab title="已结算"></van-tab>
    </van-tabs>
    <div class="list">
      <div v-for="(item,i) in list" :key="i">
        <div class="flex between mb24">
          <div style="text-align: left;">
            <div class="fz26">{{item.order_sn}}</div>
            <div class="c-999 fz24 mt-8">{{item.created_at}}</div>
          </div>
          <div class="c-F14E4E fz26 bold">{{ $i18n.t('money') }}{{ item.settlement_price }}</div>
        </div>
        <div class="bond ">
          <div class="flex between align-center">
            <div style="text-align: left;">
              <p class="bold fz26 mb16">{{item.exchange_voucher_name}}</p>
              <div class="fz24 c-999">
                <span>寄售价：{{ $i18n.t('money') }}{{item.price}}</span>
                <span>服务费：{{ $i18n.t('money') }}{{item.service_charge}}</span>
              </div>
            </div>
            <span>{{item.status_name}}</span>
          </div>
        </div>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      avatar_image:"",
      text: "",
      nickname: "",
      list: [],

      isLoadMore: true,
      page: 1,
      total_page: 0,

      un_settlement_count: 0,
      finish_settlement_count: 0,
      one_consignment_sum: 0,
      consignment_sum: 0
    }
  },
  activated() {
    this.active = 0;
    this.isLoadMore = true;
    this.getData();
    this.get_total()
  },
  methods: {
    get_total() {
      $http.post("plugin.consignment.frontend.controllers.withdrawal.index").then(res => {
        if (res.result) {
          let data = res.data.statistics;
          this.un_settlement_count = data.un_settlement_count;
          this.finish_settlement_count = data.finish_settlement_count;
          this.one_consignment_sum = data.one_consignment_sum;
          this.consignment_sum = data.consignment_sum;
          this.text = res.data.plugin_name
          this.avatar_image = res.data.member.avatar_image
          this.username = res.data.member.username
        } else {
          this.$toast(res.msg)
        }
      })
    },
    change() {
      this.getData()
    },
    getData(page = 1) {
      let json = {
        page,
        status:this.active - 1
      }
      if(this.active == 0){
        delete json.status
      }
      $http.post("plugin.consignment.frontend.controllers.withdrawal.get-exchange-voucher-list",json).then(res => {
        if (res.result) {
          let {current_page,last_page,data} = res.data.settlement_record_list;
          this.page = current_page;
          this.total_page = last_page;
          (page==1)?(this.list = data ||[]):(this.list = this.list.concat(data))

        } else {
          this.$toast(res.msg)
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page)
    },
  }
}
</script>

<style lang="scss" scoped>
.exchange-bond {
  min-height: 100vh;
  background: #fff;

  .list {
    padding-top: 0.75rem;
    padding-left: 0.5625rem;
    padding-right: 0.75rem;
  }

  .success {
    color: #f14e4e;
  }

  .line {
    margin-bottom: 0.75rem;
    background: #e7e7e7;
    height: 1px;
  }

  .bond {
    background: #f5f5f5;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  .bold {
    font-weight: bold;
  }

  .mt-8 {
    margin-top: 0.25rem;
  }

  .flex {
    display: flex;
  }

  .between {
    justify-content: space-between;
  }

  .detail-wrapper {
    position: relative;
    background: #fff;
    display: flex;
    padding: 0.75rem 0;
    justify-content: space-around;

    &::after {
      position: absolute;
      content: "";
      width: 1px;
      height: 5.8125rem;
      background-color: #e7e7e7;
      left: 50%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .c-999 {
    color: #999;
  }

  .flex-center {
    display: flex;
    flex-direction: column;
  }

  .mb8 {
    margin-bottom: 0.25rem;
  }

  .mb16 {
    margin-bottom: 0.5rem;
  }

  .align-center {
    align-items: center;
  }

  .mb24 {
    margin-bottom: 0.75rem;
  }

  .fz28 {
    font-size: 0.875rem;
  }

  .fz26 {
    font-size: 0.8125rem;
  }

  .fz24 {
    font-size: 0.75rem;
  }

  .c-F14E4E {
    color: #f14e4e;
  }

  .header {
    background: #fb6b68;
    padding: 1.5rem 0.9375rem;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1rem;
  }

  .img {
    width: 3.4375rem;
    height: 3.4375rem;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 0.375rem;
  }
}
</style>